<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加地址</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/core.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/icon.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/tjadress.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
		<link rel="stylesheet" href="../../css/pulice.css">
		<link rel="stylesheet" href="../../css/mobileSelect.css">
		<script src="../../js/libs/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
            $(function () {
                $('.hm-bar').load('../../data/headerOther.html',function (data) {
                    $(this).find('.head-main').text('添加地址');
                    $(this).find('.hm-bar-box').css('position','static');
                    $(this).find('.head-left').on('tap',function () {
                        window.history.back();
                    });
                });
            })
		</script>
	</head>
		<body>
		<!-- ！TODO 三级联动表单有点复杂，先用seleect 替换-->
		<div id="box">
			<div class="hm-bar"></div>
			<!--身体-->
			<div class="WD-shenti">
				
				<div class="st-center">
					<div class="tiao"></div>
					<div class="wd">
						<div class="dIv1">
							收件人姓名
						</div>
						<div class="text">
							<input type="text" placeholder="请输入收件人姓名"  v-model=" addressCard.userName"/>
						</div>
					</div>	
				</div>
				<div class="st-center">
					<div class="wd">
						<div class="dIv1">
							手机号码
						</div>
						<div class="text">
							<input type="text" placeholder="请输入收件人联系方式"  v-model="addressCard.userPhone"/>
						</div>
					</div>	
				</div>
				<div class="st-center">
					<div class="wd">
						<div class="dIv1">
							邮政编码
						</div>
						<div class="text">
							<input type="text" placeholder="请输入邮政编码" />
						</div>
					</div>	
				</div>
				<div class="st-center">
					<div class="ssq">
						<div class="dIv1" id="trigger1" >
							省市区
						</div>
						<div class="text1" style=" display: flex;flex-direction: row">
							<input type="text" placeholder="" style="height:100%" />
						</div>
						<div class="wd-dw">
							<img src="../../img/wode/dw.png" />
							<p>定位</p>
						</div>
					</div>	
					
				</div>
				
				
				
				
				<div class="st-center" style="padding-bottom: 0.5rem;">
					<div class="wd nobor">
						<div class="dIv1">
							详细地址
						</div>
						<div class="text">
							<input type="text" placeholder="请输入详细地址街道/小区/门牌号" v-model="addressCard.userAddress"/>
						</div>
					</div>	
				</div>

				
				
				
				
				<div class="tj" @click="addAddress" >
					保存
				</div>
				
				<div id="container"></div>
				<!--<div> 三级联动</div>-->
			</div>
			
		</div>	
	</body>
	<style>

		#container {width:100%; height: 200px; }
	</style>
	<script src="../../js/jquery.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/vue-resource.min.js"></script>
	<script src="../../js/mobileSelect.min.js"></script>
	<script src="../../js/libs/jquery.validate.min.js"></script>
	<script src="../../js/libs/messages_zh.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=9d5379a6b126b9b084eed87593349730"></script>

	<script>



        $(function () {
            Vue.nextTick(function () {
                var mobileSelect1 = new MobileSelect({
                    trigger: '#trigger1',
                    title: '单项选择',
                    wheels: [
                        {data:vm.province//[
                            // {
                            //     id:'1',
                            //     value:'河北省',
                            //    // childs:[{
                            //         //    id:'1',
                            // 	//	value:'石家庄市',
                            // 		// childs:[
                            // 		//     {
                            // 		// 		id:'1',value: "桥东区"
                            // 		// 	},
                            // 		// 	{
                            // 		// 	    id:'2',value: "新华区"
                            // 		// 	}
                            //             //
                            // 		// ]
                            // 	// },
                            //     // ]
                            // },
                            // ]
                        }
                    ],
                    position:[0,1,2],
                    callback:function(indexArr, data){
                        console.log(indexArr)
                        console.log(data); //返回选中的json数据
                    },
                    transitionEnd:function (indexarr,data) {
                        console.log(indexarr,data)
                    }

                });

            })

        });







		/*
		*
		* "areaIdPath_one": 130000, 省Id
        "areaIdPath_two": 130400, 市ID
        "areaIdPath_thress": 130421, 区ID
        "isDefault": 1, 是否默认地址 1：默认
        "userAddress": "147", 具体地址
        "userName": "g", 用户名
        "userPhone": "18612110314" 电话
		* */
		var vm=new Vue({
			el:'#box',
			data:{
			    addressCard:{},
				province:[]
			},
			mounted:function(){
			    this.$nextTick(function () {
					this.getAddress()
                })
			},
			methods:{
				addAddress:function () {
				    console.log(this.addressCard);
                    this.$http.get(SURL+'Address-add',{params:this.addressCard}).then(function (res) {
						console.log(res)
                    })
                },
				//获取当前的地址
				getAddress:function () {
				    var _this=this;
					_this.$http.get(SURL+'app/Address/area',{params:{areaId:''}}).then(function (res) {
						console.log(res)
						_this.province=res.body.data;
						_this.province.forEach(function (v,i) {
						  //  console.log(v)
							_this.$set(v,'id',v.areaId);
							_this.$set(v,'value',v.areaName);
							_this.$http.get(SURL+'app/Address/area',{params:{areaId:v.areaId}}).then(function (r) {
							    if(r.body.status==1){
                                    _this.$set(v,'childs',r.body.data);
									r.body.data.forEach(function (o,j) {
                                        _this.$set(o,'id',o.areaId);
                                        _this.$set(o,'value',o.areaName);
                                        _this.$http.get(SURL+'app/Address/area',{params:{areaId:o.areaId}}).then(function (re) {
                                            _this.$set(o,'childs',re.body.data);
                                            re.body.data.forEach(function (k,g) {
                                                _this.$set(k,'id',k.areaId);
                                                _this.$set(k,'value',k.areaName);



                                               // console.log(_this.province)
                                            })
                                            //console.log(_this.province)
										})
                                    })
								}

                            })
                        })
                    })
                },




			},


		})



	//	高德地图定位功能

        var map = new AMap.Map('container',{
            zoom:12,
            center:[116.39,39.9]
        });
        AMap.plugin('AMap.ToolBar',function(){//异步加载插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
        });

	</script>
</html>
